<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时列表</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<style type="text/css">
    html {
        font-family: sans-serif;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }

    body {
        margin: 10px;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    td, th {
        padding: 0;
    }

    .pure-table {
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        border: 1px solid #cbcbcb;
    }

    .pure-table caption {
        color: #000;
        font: italic 85%/1 arial, sans-serif;
        padding: 1em 0;
        text-align: center;
    }

    .pure-table td, .pure-table th {
        border-left: 1px solid #cbcbcb;
        border-width: 0 0 0 1px;
        font-size: inherit;
        margin: 0;
        overflow: visible;
        padding: .5em 1em;
    }

    .pure-table thead {
        background-color: #e0e0e0;
        color: #000;
        text-align: left;
        vertical-align: bottom;
    }

    .pure-table td {
        background-color: transparent;
    }

    body {
        text-align: center;
    }

    .status {
        color: aqua;
    }
</style>
<body>
<table class="pure-table">
    <thead>
    <tr>
        <th>任务名称</th>
        <th>任务所在组</th>
        <th>任务类名称</th>
        <th>触发器名称</th>
        <th>触发器所在组</th>
        <th>表达式</th>
        <th>时区</th>
        <th>状态</th>
        <th>是否删除</th>
    </tr>
    </thead>
    <tbody id="value">

    </tbody>
</table>
</body>
<script>
    $(document).ready(function () {
        $.ajax({
            url: "http://localhost:8081/quartzJobList", //请求的url地址
            dataType: "json", //返回格式为json
            contentType: 'application/json;charset=utf-8', //请求数据类型
            async: true, //请求是否异步，默认为异步，这也是ajax重要特性
            type: "POST", //请求方式
            data: JSON.stringify({
                pageIndex: 1,
                pageSize: 10
            }),
            success: function (data) {
                let list = data.list;
                console.log(list)
                for (let i = 0; i < list.length; i++) {

                    var dom = '<tr>' +
                        '<td>' + list[i].job_NAME
                        + '</td><td>' + list[i].job_GROUP
                        + '</td><td>' + list[i].job_CLASS_NAME
                        + '</td><td>' + list[i].trigger_NAME
                        + '</td><td>' + list[i].trigger_GROUP
                        + '</td><td>' + list[i].cron_EXPRESSION
                        + '</td><td>' + list[i].time_ZONE_ID
                        + '</td>' + status(list[i].trigger_STATE)
                        + '<td>' + list[i].delete + '</td>' +
                        '</tr>';
                    $("#value").html(dom)
                }
            }
        });
    });

    function status(e) {
        if (e == 'PAUSED') {
            return '<td style="color: red">已暂停</td>';
        } else if (e == 'WAITING') {
            return '<td style="color: aqua">运行中</td>';
        } else if (e == 'ACQUIRED') {
            return '<td style="color: blue">正在执行</td>';
        }
    }


</script>
</html>